<!--
 * 搜索容器组件
 * @Author: zcy
 * @Date: 2021-01-20 13:39:59
 * @LastEditors: dingxiaolin
 * @LastEditTime: 2021-11-15 16:23:34
 -->

<template>
    <div class="search-container">
        <div class="search-body">
            <slot></slot>
            <div class="btnGroups" :class="isTop ? '' : 'btnPosition'">
                <el-button v-if="isReset" type="primary" class="btn" :loading="loading" @click="$emit('onReset')" :disabled="loading">重置</el-button>
                <el-button id="sn-submit-search" type="primary" class="btn" :loading="loading" @click="$emit('onSearch')" :disabled="loading"
                    >查询</el-button
                >
            </div>
            <div v-if="!isTop" class="bottombox"></div>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component
export default class SearchPanel extends Vue {
    /**
     * 将搜索按钮显示在上面一排
     */
    @Prop({
        default: false,
    })
    public isTop: boolean;
    @Prop({
        default: true,
    })
    public isReset: boolean;
    @Prop({
        default: false,
    })
    public loading: boolean;
}
</script>
<style lang="scss" scoped>
.search-container {
    border-radius: 3px;
    border: 1px solid #ebebeb;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    background: #ffffff;
    box-shadow: 0 1px 4px 0 rgba(3, 44, 77, 0.1);
    border-radius: 4px;
}

.btn {
    width: 85px;
    height: 35px;
    font-size: 12px;
}

.search-title {
    background: #ffffff;
    color: #303133;
    border-radius: 2px 2px 0 0;
    margin: 0px 15px;
    font-weight: 600;
    font-size: 1.4em;
    border-bottom: 1px solid #e3e7ef;
    padding: 10px 0px;
}

.search-body {
    padding-top: 15px;
    position: relative;
    padding-right: 15px;
}

/deep/ .el-button--small {
    border-radius: 4px;
    padding: 9px 20px;
}

.btnGroups {
    position: absolute;
    bottom: 15px;
    right: 83px;
}

.btnPosition {
    bottom: 20px;
}
.bottombox {
    padding-bottom: 40px;
}
</style>